<template>
  <view class="page_box">
    <view class="content_box">
      <scroll-view
        scroll-y="true"
        enable-back-to-top
        @scrolltolower="loadMore"
        class="scroll-box"
      >
        <!-- 订单列表 -->

        <view class="order-list" v-for="order in orderList" :key="order.id">
          <view class="order-head">
            <text class="no">订单编号：{{ order.orderId }}</text>
            <text class="state">{{
              order.orderStatus == 0 ? "已支付" : "未支付"
            }}</text>
          </view>
          <view class="goods-order">
            <view class="order-content">
              <view class="order-img">
                <image :src="order.mallProductVo?.productMainPic"></image>
              </view>
              <view class="order-info">
                <view class="order-name">{{
                  order.mallProductVo?.productName
                }}</view>
                <view class="order-sku">
                  <text>数量：{{ order.deviceNum }}</text>
                </view>
                <view class="order-price"> ￥{{ order.payPrice }} </view>
              </view>
            </view>
          </view>
          <view class="order-bottom">
            <view class="all-msg">
              <text class="all-unit">创建时间：{{ order.createTime }}</text>
            </view>
            <view class="font-OPPOSANS">
              {{ order.status <= 0 ? "需付款" : "实付款" }}：
              <view class="all-money">￥{{ order.payPrice }}</view>
            </view>
          </view>
        </view>
        <view v-if="loadStatus === 'loading'" class="order-list">
          <i-skeleton
            size="0"
            :rowsW="['80%', '60%']"
            :rowsH="['24rpx', '38rpx']"
            height="144rpx"
            :rows="4"
          ></i-skeleton>
        </view>
        <i-more :status="loadStatus" />
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import useStore from "../../stores/index";
import { onShow } from "@dcloudio/uni-app";
import { getMallOrderList } from "../../api/index";

interface MallProductVo {
  productName: string;
  productMainPic: string;
}

interface OrderItem {
  id: number;
  orderId: string;
  orderStatus: number;
  mallProductVo?: MallProductVo;
  deviceNum: number;
  oriPrice: number;
  createTime: string;
  status: number;
  payPrice: number;
}

interface FormData {
  productName: string;
  ypageNum: number;
  ypageSize: number;
  total: number;
}

// Store
const store = useStore();
const userInfo = computed(() => store.userInfo);

// Refs
const isEmpty = ref(false);
const loadStatus = ref<"loadmore" | "loading" | "nomore">("loadmore");
const currentPage = ref(1);
const orderList = ref<OrderItem[]>([]);

const formData = ref<FormData>({
  productName: "",
  ypageNum: 1,
  ypageSize: 15,
  total: 0,
});

// Methods
const getOrderList = async () => {
  loadStatus.value = "loading";
  try {
    const res = await getMallOrderList({
      ...formData.value,
    });

    if (res.code === 200) {
      orderList.value = [...orderList.value, ...res.rows];
      isEmpty.value = !orderList.value.length;
      formData.value.total = res.total;
      loadStatus.value =
        orderList.value.length < formData.value.total ? "loadmore" : "nomore";
    }
  } catch (error) {
  
    loadStatus.value = "loadmore";
  }
};

const loadMore = () => {
  if (orderList.value.length < formData.value.total) {
    formData.value.ypageNum++;
    getOrderList();
  }
};

// Lifecycle
onShow(() => {
  orderList.value = [];
  formData.value.ypageNum = 1;
  getOrderList();
});
</script>

<style lang="scss">
.order-list {
  background: #fff;
  box-sizing: border-box;
  padding: 24rpx;
  width: calc(100% - 48rpx);
  margin: 20rpx auto;
  border-radius: 24rpx;
  .font-OPPOSANS {
    font-size: 28rpx;
    font-weight: bold;
    @include flexR;
    .all-money {
      color: #ff2929;
      font-family: DIN Alternate, DIN Alternate;
    }
  }
  .order-bottom {
    @include flexRS;
    .all-msg {
      font-size: 26rpx;
      color: #999;
      margin-bottom: 10rpx;

      .all-unit {
        font-size: 20rpx;
      }

      .all-money {
        font-size: 26rpx;
        color: #333;
        font-weight: 500;

        &::before {
          content: "￥";
          font-size: 20rpx;
        }
      }
    }
  }

  .order-head {
    padding-bottom: 18rpx;
    border-bottom: 1rpx solid #dfdfdf;
    @include flexRS;

    .no {
      font-size: 26rpx;
      color: #999;
    }

    .state {
      font-size: 26rpx;
      color: #a8700d;
    }
  }

  .goods-order {
    border-bottom: 1px solid rgba(223, 223, 223, 0.5);
    padding: 20rpx 20rpx 0;
    margin-bottom: 20rpx;

    .order-content {
      padding-bottom: 20rpx;
      @include flexR;
      image {
        width: 140rpx;
        height: 140rpx;
        margin-right: 20rpx;
      }
      .order-info {
        @include flexC;
        .order-name {
          font-size: 26rpx;
          font-weight: 600;
        }
        .order-sku {
          font-size: 22rpx;
          color: #666;
          margin-bottom: 10rpx;
        }
        .order-price {
          font-size: 28rpx;
          color: #ff2929;
          font-family: DIN Alternate, DIN Alternate;
          font-weight: bold;
        }
      }
    }
  }
}

.flexR {
  width: 100%;
  @include flexRS;
}
</style>
